"use strict";
const boxDom = document.querySelector(".box");
//枚举
var Color;
(function (Color) {
    Color[Color["#ccc"] = 1] = "#ccc";
    Color[Color["red"] = 2] = "red";
    Color[Color["greenyellow"] = 3] = "greenyellow";
})(Color || (Color = {}));
let num = 0;
//递归
const menuArr = (arr, num) => {
    num += 1;
    const newArr = arr.map(item => {
        return `<div style="background:${Color[num]}">
                <p>${item.title}</p>
                ${!item.children ? '' : `<div class='menuItem'>
                    ${menuArr(item.children, num)}
                </div>`}
            </div>`;
    }).join('');
    return newArr;
};
//点击事件
const bindEvent = () => {
    const pDom = Array.from(document.querySelectorAll("p"));
    pDom.forEach(item => {
        item.addEventListener('click', (e) => {
            if (item.nextElementSibling) {
                let isShow = e.target.nextElementSibling.style.display;
                console.log(isShow);
                if (isShow === 'block') {
                    e.target.nextElementSibling.style.display = 'none';
                }
                else {
                    e.target.nextElementSibling.style.display = 'block';
                }
            }
        });
    });
};
const render = () => {
    boxDom.innerHTML = menuArr(menu, num);
    bindEvent();
};
render();
